<template>
  <div class="tableCom">
    <div class="tableHead">
      <div class="tableHeadItem" v-for="(item,index) in head" :key="index" :style="{flex:item.flex}">{{ item.title }}
      </div>
    </div>
    <div class="tableBody searchTop">
      <div class="tableBody2" v-for="(item,index) in list" :key="index">
        <div class="tableBody2Item" :style="{flex: head[0].flex}">
          <el-select clearable v-model="item.preset" placeholder="请选择">
            <el-option
                v-for="item in presetList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="tableBody2Item" :style="{flex: head[1].flex}">
          <el-input v-model="item.speed" placeholder="请输入速度"></el-input>
        </div>
        <div class="tableBody2Item" :style="{flex: head[2].flex}">
          <el-input v-model="item.time" placeholder="请输入时间"></el-input>
        </div>
        <div class="tableBody2Item" :style="{flex: head[3].flex}">
          <i class="icon iconfont icon-xiangshangjiantoucuxiao" @click="moveUp(index)"></i>
          <i class="icon iconfont icon-xiangxiajiantoucuxiao" @click="moveDown(index)"></i>
          <i class="icon iconfont icon-add-bold" @click="insertBelow(index)"></i>
          <i class="icon iconfont icon-shanchu" @click="removeItem(index)"></i>
        </div>
      </div>
    </div>
    <div class="operationFoot">
      <wButton
          bgColor="rgba(11, 42, 74, 1.00)"
          boxShadowColor="rgba(16, 103, 160, 1.00)"
          name="保存" data-wow-delay="0.1s" @click="saveData"></wButton>
      <wButton
          bgColor="rgba(11, 42, 74, 1.00)"
          class="ml20"
          boxShadowColor="rgba(16, 103, 160, 1.00)"
          name="取消" data-wow-delay="0.1s" @click="cancel"></wButton>
    </div>
  </div>
</template>

<script>
import wButton from '@/components/wButton/index.vue'

export default {
  name: "tableCom",
  components: {wButton},
  props: {
    head: {
      type: Array,
      default() {
        return [{
          title: '预置点',
          flex: 1
        }, {
          title: '速度',
          flex: 1
        }, {
          title: '时间(S)',
          flex: 1
        }, {
          title: '操作',
          flex: 1
        }];
      }
    },
  },
  data() {
    return {
      presetList: [
        {label: '预置1', value: '预置1'},
        {label: '预置2', value: '预置2'},
        {label: '预置3', value: '预置3'},
      ],
      list: [
        {preset: '预置1', speed: '速度1', time: 5},
        {preset: '预置2', speed: '速度2', time: 10},
        {preset: '预置3', speed: '速度3', time: 15},
      ]
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        const temp = this.list[index - 1];
        this.list[index - 1] = this.list[index];
        this.list[index] = temp;
      }
    },
    moveDown(index) {
      if (index < this.list.length - 1) {
        const temp = this.list[index + 1];
        this.list[index + 1] = this.list[index];
        this.list[index] = temp;
      }
    },
    insertBelow(index) {
      const newItem = {preset: '', speed: '', time: ''}; // Set default values as needed
      this.list.splice(index + 1, 0, newItem);
    },
    removeItem(index) {
      this.list.splice(index, 1);
    },
    saveData() {
      this.$emit('saveData', 0)
      this.$message({
        message: '保存成功',
        type: 'success'
      });
    },
    cancel() {
      this.$emit('saveData', 0)
    },
  }
}
</script>

<style lang="scss" scoped>
.tableCom {
  width: calc(100% - 0px);
  margin-left: 0px;
  position: relative;
  height: 100%;
  overflow: hidden;

  .tableHead {
    width: 100%;
    height: 39px;
    background: rgba(48, 142, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

    .tableHeadItem {
      font-size: 14px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #55E3FF;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      flex: 1;
    }
  }

  .tableBody {
    position: relative;
    height: calc(100% - 120px);
    overflow: hidden;

    .tableBody2 {
      min-height: 34px;
      padding-top: 5px;
      padding-bottom: 5px;
      background: rgba(#308EFF, 0);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;

      .tableBody2Item {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: #CAD3ED;
        text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        margin-left: 10px;
        margin-right: 10px;
        flex: 1;

        .icon {
          font-size: 20px;
          margin-left: 10px;
          margin-right: 10px;
          cursor: pointer;
          color: rgba(122, 173, 211, 1.00);
        }
      }
    }

    .tableBody2:nth-child(2n) {
      background: rgba(48, 142, 255, 0.24);
    }
  }

  .status {
    color: rgba(13, 206, 242, 1);
  }
}

.zc {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #46FFBE;
}

.yc {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #FF5B5B;
}

.operationFoot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>
